import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {CombitionRet} from "../../../script/type/Type";
import * as React from "../../../script/frame/apiModel/gui/React";
import {View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

interface IProp {
    x: number,
    y: number,
    combinationId: string,
    disable: boolean,
    ret: CombitionRet,
    unitIds: {[key: string]: number},
    hidden: boolean,
}
interface IState {
}

export default class CombinationInfoPage extends React.Element<IProp, IState> {


    render = () => {
        const yMargin = 0.01660;
        const backSize = { h: 0.04, w: 0.25 }
        const backPos = { x: this.props.x, y: this.props.y }
        // const backPos = { x: 0.7, y: 0.45 }
        const xPadding = 0.00500;
        const fontSize = 0.015;
        const maxCombinationMemberNum = Configer.getConfig(ConfigKey.maxCombinationMemberNum);
        const unitUseFamily = Configer.getConfig(ConfigKey.unitUseFamily);
        const memberSize = { h: 0.01660, w: 0.01250 };

        const combinationData = DataRouter.getCombinationDataByCombinationId(this.props.combinationId);
        const name = combinationData?.name;

        const getNameFun = (id: string) => {
            let unitName;
            if (unitUseFamily > 0) {
                unitName = id;
            } else {
                const unitData = DataRouter.getUnitDataByUnitId(id);
                unitName = unitData?.Name ? unitData.Name : '';
            }
            return unitName;
        }

        const useLadder = Configer.getConfig(ConfigKey.unitUseLadder)
        let retStr = DataRouterUtil.getCombinationInfoStr(this.props.combinationId, this.props.ret, this.props.unitIds, getNameFun, useLadder);

        const retLineArr = retStr.split('\n');
        const retLineNum = retLineArr.length;
        const retSize = { h: retLineNum * fontSize, w: backSize.w - xPadding * 2 }
        backSize.h = backSize.h + retSize.h + yMargin * 2;
        backPos.x = backPos.x;
        backPos.y = backPos.y;

        const infoPage = Configer.getResource(ResourceKey.infoPagePath);

        return <View   key={GuiKeys.combinationBarInfo} style={{ hidden: this.props.hidden, backgroundImage: infoPage, left: backPos.x, top: backPos.y, width: backSize.w, height: backSize.h, paddingT: yMargin, paddingL: xPadding }}>
            <View   key={GuiKeys.combinationBarInfoTitle} style={{ fontSize: fontSize,  width: retSize.w, height: 0.01660, marginB: 0.01660 }}>{name}</View>
            <View   key={GuiKeys.combinationBarInfoText} style={{ fontSize: fontSize,  width: retSize.w, height: retSize.h }}>{retStr}</View>
        </View>


    }
}